<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="/favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../public/css/iconfont.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <link rel="stylesheet" href="../public/css/homepage/homepage.css">
    <style type="text/css">
        .infinite-scroll-preloader {
            margin-top: -20px;
        }
    </style>
</head>

<body>
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="/demos/card" data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">首页</h1>
        </header>
        <nav class="bar bar-tab">
            <a class="tab-item active" href="#">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="#">
                <span class="icon icon-me"></span>
                <span class="tab-label">活动</span>
            </a>
            <a class="tab-item" href="#">
                <span class="icon icon-star"></span>
                <span class="tab-label">消息</span>
            </a>
            <a class="tab-item" href="#">
                <span class="icon icon-settings"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <div class="bar bar-header-secondary">
            <div class="searchbar">
                <a class="searchbar-cancel">取消</a>
                <div class="search-input">
                    <label class="icon icon-search" for="search"></label>
                    <input type="search" id='search' placeholder='输入关键字...' />
                </div>
            </div>
        </div>
        <div class="content pull-to-refresh-content infinite-scroll" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>
            <!-- 这里是页面内容区 -->
            <div class="page-index">
                <div class="post row">
                    <div class="col-50">
                        <div class="postImgContainer">
                            <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle">晒晒单</span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="posterImg">
                                    <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                                </div>
                                <p class="posterName">
                                    林晓如
                                </p>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                    <span class="likeNumber">999</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-50">
                        <div class="postImgContainer">
                            <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle">晒晒单</span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="posterImg">
                                    <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                                </div>
                                <p class="posterName">
                                    林晓如
                                </p>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                    <span class="likeNumber">999</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="post row">
                    <div class="col-50">
                        <div class="postImgContainer">
                            <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle">晒晒单</span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="posterImg">
                                    <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                                </div>
                                <p class="posterName">
                                    林晓如
                                </p>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                    <span class="likeNumber">999</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-50">
                        <div class="postImgContainer">
                            <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                        </div>
                        <div class="postTitleContainer">
                            <span class="postTitle">晒晒单</span>
                        </div>
                        <div class="postInformation">
                            <div class="poster">
                                <div class="posterImg">
                                    <img src="../public/images/ba943c019ef9d035fdcbbdc77f1d6d85.jpg" alt="">
                                </div>
                                <p class="posterName">
                                    林晓如
                                </p>
                            </div>
                            <div class="like">
                                <div class="likeContainer">
                                    <i class="iconfont icon-like-1"></i>
                                    <span class="likeNumber">999</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
        charset='utf-8'></script>
    <script type='text/javascript'>

        $.init()
        // 下拉刷新js
        // 添加'refresh'监听器
        $(document).on('refresh', '.pull-to-refresh-content', function (e) {
            // 模拟2s的加载过程
            setTimeout(function () {
                var cardNumber = $(e.target).find('.card').length + 1;
                var cardHTML = '<div class="card">' +
                    '<div class="card-header">card' + cardNumber + '</div>' +
                    '<div class="card-content">' +
                    '<div class="card-content-inner">' +
                    '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                    '</div>' +
                    '</div>' +
                    '</div>';

                $(e.target).find('.card-container').prepend(cardHTML);
                // 加载完毕需要重置
                $.pullToRefreshDone('.pull-to-refresh-content');
            }, 2000);
        });

        // 无限滚动
        // 加载flag
        var loading = false;
        // 最多可加载的条目
        var maxItems = 100;

        // 每次加载添加多少条目
        var itemsPerLoad = 20;

        function addItems(number, lastIndex) {
            // 生成新条目的HTML
            var html = '';
            for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
            }
            // 添加新条目
            $('.infinite-scroll-bottom .list-container').append(html);

        }
        //预先加载20条
        addItems(itemsPerLoad, 0);

        // 上次加载的序号

        var lastIndex = 20;

        // 注册'infinite'事件处理函数
        $(document).on('infinite', '.infinite-scroll-bottom', function () {

            // 如果正在加载，则退出
            if (loading) return;

            // 设置flag
            loading = true;

            // 模拟1s的加载过程
            setTimeout(function () {
                // 重置加载flag
                loading = false;

                if (lastIndex >= maxItems) {
                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    return;
                }

                // 添加新条目
                addItems(itemsPerLoad, lastIndex);
                // 更新最后加载的序号
                lastIndex = $('.list-container li').length;
                //容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            }, 1000);
        });
    </script>
</body>

</html>